<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-04-07 22:42:28
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 15:02:46
 * @FilePath: /bangand-low-code/src/layouts/components/HeaderTrigger.vue
 * @Description: 折叠点击按钮
-->
<template>
  <span :class="[prefixCls, navTheme]" @click="toggleCollapsed">
    <a-icon type="menu-unfold" v-if="sideCollapsed" />
    <a-icon type="menu-fold" v-else />
  </span>
</template>

<script>
import Vue from 'vue';
import { objectUtils } from '@/utils';
import { appLatyouMixin } from '@/mixins/app-layout-mixin';
import { SIDEBAR_TYPE } from '@/store/mutation-types';

export default {
  // 组件的名字或者页面的名字
  name: 'HeaderTrigger',
  mixins: [appLatyouMixin],
  // 加载组件
  components: {},
  // 父级组件传过来的值
  props: {},
  // 页面数据
  data() {
    return {
      prefixCls: 'layout-header-trigger'
    };
  },
  computed: {},
  // 创建后调用
  created() {},
  // 挂载完成调用
  mounted() {},
  // 方法
  methods: {
    /**
     * @description: 切换菜单是否展开
     * @return {*}
     */
    toggleCollapsed() {
      this.$store.commit(`app/${SIDEBAR_TYPE}`, !this.sideCollapsed);
    }
  }
};
</script>

<style lang="less" scoped>
.layout-header-trigger {
  display: flex;
  height: 100%;
  padding: 1px 10px 0;
  cursor: pointer;
  align-items: center;

  .anticon {
    font-size: 16px;
  }

  // &.light {
  //   color: @heading-color;

  //   svg {
  //     fill: #000;
  //   }
  // }

  // &.dark {
  //   color: @general-white-color;
  // }
}
</style>
